<template>
  <view class="container">
    <view class="title">评价</view>
    <textarea v-model="value" cols="30" rows="10" class="content" maxlength="200" placeholder="请输入对老师的评价"></textarea>
    <view class="length">{{ value.length + '/200' }}</view>
    <!-- 评分 -->
    <uni-rate v-model="rateValue" @change="onChange" activeColor="#F34915" color="#ccc" :isFill="false" />
    <view class="submit" @click="submit">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rateValue: 0,
      value: '',
      id: ''
    };
  },
  methods: {
    submit() {
      uni.$http
        .post('/evaluates/add', {
          order_id: this.id,
          content: this.value,
          star: this.rateValue
        })
        .then((res) => {
          if (res.data.code == 1) {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
          uni.redirectTo({
            url: '/parents/allorder/allorder'
          });
        });
    },
    onChange(e) {
      console.log(e.value);
      this.rateValue = e.value;
    }
  },
  onLoad(e) {
    if (e.id) {
      console.log(e.id);
      this.id = e.id;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    padding-left: 20rpx;
    border-left: 8rpx solid #3553e8;
  }
  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: 366rpx;
    padding: 30rpx;
    margin-top: 22rpx;
    margin-bottom: 30rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 30rpx;
    width: 690rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    background-color: #3553e8;
    border-radius: 100rpx;
  }
  .length {
    position: absolute;
    right: 50rpx;
    top: 400rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
  }
}
</style>
<style>
page {
  background-color: #f9f9f9;
}
</style>
